<template>
    <div>
          <!-- Note that row-key is necessary to get a correct row order. -->
          <div class="search-filter">
    <el-form :inline="true" :model="filterForm" class="demo-form-inline">
      <el-form-item label="用户状态">
        <el-select v-model="filterForm.userStatus" placeholder="请选择">
          <el-option label="全部" value="all"></el-option>
          <el-option label="启用" value="enabled"></el-option>
          <el-option label="禁用" value="disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="填卡筛选">
        <el-select v-model="filterForm.cardFill" placeholder="请选择">
          <el-option label="全部" value="all"></el-option>
          <el-option label="已填" value="filled"></el-option>
          <el-option label="未填" value="unfilled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="域名">
        <el-input v-model="filterForm.domain" placeholder="请输入域名"></el-input>
      </el-form-item>
      <el-form-item label="日期范围">
        <el-date-picker
          v-model="filterForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="卡号">
        <el-input v-model="filterForm.cardNo" placeholder="请输入卡号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
      <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id"  fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="ID" width="65">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
  
        <el-table-column width="180px" align="center" label="Date">
          <template slot-scope="{row}">
            <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
  
        <el-table-column min-width="300px" label="Title">
          <template slot-scope="{row}">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
  
        <el-table-column width="110px" align="center" label="Author">
          <template slot-scope="{row}">
            <span>{{ row.author }}</span>
          </template>
        </el-table-column>
  
        <el-table-column width="100px" label="Importance">
          <template slot-scope="{row}">
            <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="icon-star" />
          </template>
        </el-table-column>
  
        <el-table-column align="center" label="Readings" width="95">
          <template slot-scope="{row}">
            <span>{{ row.pageviews }}</span>
          </template>
        </el-table-column>
  
        <el-table-column class-name="status-col" label="Status" width="110">
          <template slot-scope="{row}">
            <el-tag :type="row.status | statusFilter">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
  
        <el-table-column align="center" label="Drag" width="80">
          <template slot-scope="{}">
            <svg-icon class="drag-handler" icon-class="drag" />
          </template>
        </el-table-column>
      </el-table>
     
    </div>
    
  </template>
  
  <script>
  import { fetchList } from '@/api/article'
//   import Sortable from 'sortablejs'
  
  export default {
    name: 'DragTable',
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        filterForm: {
        userStatus: 'all',
        cardFill: 'all',
        domain: '',
        dateRange: [],
        cardNo: ''
      },
        list: null,
        total: null,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10
        },
        sortable: null,
        oldList: [],
        newList: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      async getList() {
        // this.listLoading = true
        // const { data } = await fetchList(this.listQuery)
        // console.log('data',data)
        // this.list = data.items
        // this.total = data.total
        // this.listLoading = false
        // this.oldList = this.list.map(v => v.id)
        // this.newList = this.oldList.slice()
        this.$nextTick(() => {
        //   this.setSort()
        })
      },
      setSort() {
        // const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        // this.sortable = Sortable.create(el, {
        //   ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        //   setData: function(dataTransfer) {
        //     // to avoid Firefox bug
        //     // Detail see : https://github.com/RubaXa/Sortable/issues/1012
        //     dataTransfer.setData('Text', '')
        //   },
        //   onEnd: evt => {
        //     const targetRow = this.list.splice(evt.oldIndex, 1)[0]
        //     this.list.splice(evt.newIndex, 0, targetRow)
  
        //     // for show the changes, you can delete in you code
        //     const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
        //     this.newList.splice(evt.newIndex, 0, tempIndex)
        //   }
        // })
      }
    }
  }
  </script>
  
  <style>
  .search-filter {
  margin: 10px;
}

  .sortable-ghost{
    opacity: .8;
    color: #fff!important;
    background: #42b983!important;
  }
  </style>
  
  <style scoped>
  .icon-star{
    margin-right:2px;
  }
  .drag-handler{
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .show-d{
    margin-top: 15px;
  }
  </style>
  